<!--
 * @description: 无内容时的提示
 * @Author: wxy
 * @Date: 2019-02-19 16:25:22
 -->
<template>
  <div class="empty" :style="{ marginTop: marginTop + 'px', height: height + 'px' }">
    <img :src="imgUrl" :style="{ width: imgWidth + 'px' }" />
    <p class="message">{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'emptyReminder',
  props: {
    message: {
      type: String,
      default: '暂无数据~',
    },
    marginTop: {
      type: Number,
      default: 200,
    },
    imgUrl: {
      type: String,
      default: require('@/assets/img/empty-icon.png'),
    },
    imgWidth: {
      type: Number,
      default: 100,
    },
    height: {
      type: Number,
      default: 130,
    },
  },
};
</script>

<style lang="scss" scoped>
.empty {
  max-width: 500px;
  margin: 0 auto;
  margin-top: 200px;
  margin-bottom: 50px;
  position: relative;
  img {
    position: absolute;
    left: 50%;
    top: 0px;
    height: auto;
    transform: translateX(-50%);
  }
  .message {
    width: 100%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    letter-spacing: 1px;
    font-size: 14px;
    margin-top: 20px;
    text-align: center;
    color: #999;
  }
}
</style>
